import { createVar, globalStyle, style } from '@vanilla-extract/css';
import { vars } from './vars.css';
import { darken, fallBackGlobalStyle, modifyHSLColorLightness, parseHSL, toHSL } from './tools';
import { lightColor } from './colors/colorLight.css';
import { darkColor } from './colors/colorDark.css';

const textColor = createVar();
const borderColor = createVar();
const backColor = createVar();
const hoverTextColor = createVar();
const hoverBorderColor = createVar();
const hoverBackColor = createVar();
const activeTextColor = createVar();
const activeBorderColor = createVar();
const activeBackColor = createVar();
const disableTextColor = createVar();
const disableBorderColor = createVar();
const disableBackColor = createVar();

function colorBtn(color: string) {
	return {
		[textColor]: vars.color.buttonText,
		[backColor]: color,
		[borderColor]: color,
		[hoverTextColor]: vars.color.buttonText,
		[hoverBorderColor]: darken(color, 0.1),
		[hoverBackColor]: darken(color, 0.1),
		[activeTextColor]: vars.color.buttonText,
		[activeBorderColor]: darken(color, 0.2),
		[activeBackColor]: darken(color, 0.2),
		[disableTextColor]: vars.color.disabledText,
		[disableBorderColor]: vars.color.disabledText,
		[disableBackColor]: 'transparent',
	};
}

function colorTextBtn(color: string) {
	return {
		[textColor]: color,
		[backColor]: 'transparent',
		[borderColor]: vars.color.border,
		[hoverTextColor]: color,
		[hoverBorderColor]: vars.color.border,
		[hoverBackColor]: darken(vars.color.panelBackground, 0.15),
		[activeTextColor]: color,
		[activeBorderColor]: vars.color.border,
		[activeBackColor]: darken(vars.color.panelBackground, 0.25),
		[disableTextColor]: vars.color.disabledText,
		[disableBorderColor]: vars.color.disabledText,
		[disableBackColor]: 'transparent',
	};
}

export const knnoButton = style({
	display: 'inline-flex',
	flexDirection: 'row',
	gap: '0.2em',
	padding: '0 1em',
	borderRadius: vars.layout.smallRadius,
	minHeight: vars.layout.inputHeight,
	lineHeight: '1rem',
	alignItems: 'center',
	justifyContent: 'center',
	cursor: 'pointer',
	transition: 'background-color 0.2s, border-color 0.2s, color 0.2s',
	fontSize: '1rem',
	boxSizing: 'border-box',
	userSelect: 'none',
	vars: {
		...colorTextBtn(vars.color.emphasizeText),
	},
	borderStyle: 'solid',
	borderWidth: '1px',
	color: textColor,
	backgroundColor: backColor,
	borderColor: borderColor,
});
fallBackGlobalStyle(
	knnoButton,
	{
		vars: {
			[hoverBackColor]: modifyHSLColorLightness(lightColor.color.panelBackground, -0.15),
			[activeBackColor]: modifyHSLColorLightness(lightColor.color.panelBackground, -0.25),
		},
	},
	{
		vars: {
			[hoverBackColor]: modifyHSLColorLightness(darkColor.color.panelBackground, 0.15),
			[activeBackColor]: modifyHSLColorLightness(darkColor.color.panelBackground, 0.25),
		},
	}
);

globalStyle(`${knnoButton}::-moz-focus-inner`, {
	border: '0',
	padding: '0',
	margin: '0',
});
globalStyle(`${knnoButton}.primary`, {
	vars: {
		...colorBtn(vars.color.accent),
	},
});

function fallBackButtonColor(selector: string, color: string) {
	const hsl = parseHSL(color);
	const lightHoverColor = toHSL({ ...hsl, lightness: hsl.lightness - 100 * 0.1 });
	const lightActiveColor = toHSL({ ...hsl, lightness: hsl.lightness - 100 * 0.2 });
	const darkHoverColor = toHSL({ ...hsl, lightness: hsl.lightness + 100 * 0.1 });
	const darkActiveColor = toHSL({ ...hsl, lightness: hsl.lightness + 100 * 0.2 });
	fallBackGlobalStyle(
		selector,
		{
			vars: {
				[hoverBorderColor]: lightHoverColor,
				[hoverBackColor]: lightHoverColor,
				[activeBorderColor]: lightActiveColor,
				[activeBackColor]: lightActiveColor,
			},
		},
		{
			vars: {
				[hoverBorderColor]: darkHoverColor,
				[hoverBackColor]: darkHoverColor,
				[activeBorderColor]: darkActiveColor,
				[activeBackColor]: darkActiveColor,
			},
		}
	);
}
fallBackButtonColor(`${knnoButton}.primary`, lightColor.color.accent);
globalStyle(`${knnoButton}.primary-text`, {
	vars: {
		...colorTextBtn(vars.color.accent),
	},
});
fallBackGlobalStyle(
	`${knnoButton}.primary-text`,
	{
		vars: {
			[hoverBackColor]: modifyHSLColorLightness(lightColor.color.accent, -0.15),
			[activeBackColor]: modifyHSLColorLightness(lightColor.color.accent, -0.25),
		},
	},
	{
		vars: {
			[hoverBackColor]: modifyHSLColorLightness(darkColor.color.accent, 0.15),
			[activeBackColor]: modifyHSLColorLightness(darkColor.color.accent, 0.25),
		},
	}
);

globalStyle(`${knnoButton}.success`, {
	vars: {
		...colorBtn(vars.color.success),
	},
});
fallBackButtonColor(`${knnoButton}.success`, lightColor.color.success);

globalStyle(`${knnoButton}.warning`, {
	vars: {
		...colorBtn(vars.color.warning),
	},
});
fallBackButtonColor(`${knnoButton}.warning`, lightColor.color.warning);

globalStyle(`${knnoButton}.danger`, {
	vars: {
		...colorBtn(vars.color.danger),
	},
});
fallBackButtonColor(`${knnoButton}.danger`, lightColor.color.danger);

globalStyle(`${knnoButton}:is(:hover,:focus)`, {
	// zIndex: 1,
	color: hoverTextColor,
	backgroundColor: hoverBackColor,
	borderColor: hoverBorderColor,
});
globalStyle(`${knnoButton}:active`, {
	// zIndex: 1,
	color: activeTextColor,
	backgroundColor: activeBackColor,
	borderColor: activeBorderColor,
});
globalStyle(`${knnoButton}[disabled]`, {
	color: disableTextColor,
	backgroundColor: disableBackColor,
	borderColor: disableBorderColor,
	cursor: 'not-allowed',
});
